<!--
 * @Author: your name
 * @Date: 2020-08-24 23:20:09
 * @LastEditTime: 2020-09-01 01:02:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \data-platform\src\views\Home.vue
-->
<template>
  <div class="home">
    <!-- 导航 -->
    <div class="navBarTolls">
      <div class="menuBar">
        <div class="logo">
          <img src="../assets/imgs/logo.png" alt="" />
        </div>
        <ul class="navBar">
          <li
            v-for="(item, index) in menuList"
            :key="index"
            :data-menuanchor="item.label"
            :class="{ activeClass: currentIndex === index }"
            @mouseenter="selectItem(index)"
          >
            {{ item.name }}
          </li>
        </ul>
        <div class="language">
          <img src="../assets/imgs/guoqi.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 二级菜单区域 -->
    <div class="secondMenuBar">
      <div
        class="menuContent animate__animated animate__fadeIn"
        v-if="showSecondMenu"
        @mouseleave="leaveMean()"
      >
        <ul class="secontBar" id="myNavBar">
          <li v-for="(item, index) in menuChildren" :key="index">
            <a href="javascript:;" @click="selectSure(item)">
              {{ item.name }}
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 全屏区域 -->
    <full-page ref="fullpage" :options="options" id="fullpage">
      <!-- 首页 -->
      <div class="section active">
        <!-- <img src="@/assets/imgs/bg001.jpg" alt="" class="bgimg" /> -->
        <div class="slide">
          <div class="homePage">
            <div class="content">
              <div class="title">
                <img
                  src="../assets/imgs/home/headline.png"
                  alt=""
                  class="bgimg"
                />
              </div>
              <ul class="lists">
                <li>
                  <img src="../assets/imgs/home/circle6.png" alt="" />
                  <span class="fontstyle">数据生态全域覆盖</span>
                </li>
                <li>
                  <img src="../assets/imgs/home/circle3.png" alt="" />
                  <span class="fontstyle">升级数据应用场景</span>
                </li>
                <li>
                  <img src="../assets/imgs/home/circle5.png" alt="" />
                  <span class="fontstyle">快速搭建数据体系</span>
                </li>
                <li>
                  <img src="../assets/imgs/home/circle2.png" alt="" />
                  <span class="fontstyle">提升数据变现能力</span>
                </li>
                <li>
                  <img src="../assets/imgs/home/circle1.png" alt="" />
                  <span class="fontstyle">提高数据使用率</span>
                </li>
                <li>
                  <img src="../assets/imgs/home/circle4.png" alt="" />
                  <span class="fontstyle">助力企业数字化转型</span>
                </li>
              </ul>
            </div>
            <div class="diagram">
              <p class="titleName">数据中台应用架构"四域一中心"</p>
              <img src="../assets/imgs/home/group.png" alt="" class="bgimg" />
            </div>
            <div class="bubble">
              <img src="../assets/imgs/home/circle7.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 数据湖分屏 -->
      <div class="section">
        <div class="slide">
          <div class="first">
            <div class="dataLake">
              <img src="../assets/imgs/main.png" alt="" class="bgimg" />
            </div>
            <div class="dataType">
              <img src="../assets/imgs/dataLake/box.png" alt="" class="bgimg" />
            </div>

            <div class="dataLakeDes">
              <div class="desOne">
                <p class="title">数据湖定义</p>
                <p>
                  数据湖是传统数据仓库与大数据时代融合下衍生的创新数据产品,是逻辑上各种贴源、海量、多样化的(包含结构化和非结构化)
                  原始数据集合。
                </p>
              </div>
              <div class="desTwo">
                <p class="title">数据湖价值</p>
                <p>
                  实现数据互联互通,给数据主题联接(中台)提供"原材料",并可按需用于直接消费,实现数据资产可信、实时、一致、完整、消费方找得到、可理解、可信任。
                </p>
              </div>
              <div class="desThree">
                <p class="title">数据湖愿景</p>
                <p>构建实时、可信、一致、完整的万物感知的数据湖</p>
              </div>
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="second">
            <div class="content">
              <img src="../assets/imgs/main2.jpg" alt="" />
            </div>
          </div>
        </div>
        <div class="slide">
          <img src="@/assets/imgs/bg2-4.jpg" alt="" class="bgimg" />
        </div>
        <div class="slide">
          <div class="third">
            <div class="leftContet">
              <img src="../assets/imgs/ioc.gif" alt="" />
            </div>
            <div class="rightOne">
              <p class="title">技 术 难 点</p>
              <p>海量用户,2000万+传感设备,实现数据传输并存储,实时加工并预警</p>
            </div>
            <div class="rightTwo">
              <p class="title">解 决 措 施</p>
              <p>
                基于物联网MQTT协议数据实时传输至消息列队服务器,通过Flink实时消费消息列队服务器数据,基于配置监测规则与阈值,对数据进行实时监控
              </p>
            </div>
            <div class="rightThree">
              <p class="title">业 务 价 值</p>
              <p>
                数据异常监控达到实时预警,实时监控,实时调节屋内温度、湿度等设备,达到宜居效果
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 数据探索 -->
      <div class="section">
        <div class="slide">
          <div class="dataDiscover1">
            <div class="left">
              <img
                src="../assets/imgs/dataDiscover/content1.png"
                alt=""
                class="bgimg"
              />
            </div>
            <div class="right">
              <p style="margin-bottom:10px;">
                <span class="other">自助式</span>
                的数据接入、数据加工、数据探索，
              </p>
              <p>
                让
                <span class="other">人人都成为分析师</span>
              </p>
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="dataDiscover2">
            <div class="left">
              <img
                src="../assets/imgs/dataDiscover/content2.gif"
                alt=""
                class="bgimg"
              />
            </div>
            <div class="right">
              <p style="line-height: 36px;">
                对接入的数据源进行
                <span class="other">拖、拉、拽、</span>
                式的可视化或高级模式加工，保存物理模型或逻辑模型，
                <span class="other">满足多种需求</span>
              </p>
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="dataDiscover3">
            <div class="left">
              <img
                src="../assets/imgs/dataDiscover/content3.gif"
                alt=""
                class="bgimg"
              />
            </div>
            <div class="right">
              <p style="line-height: 36px;">
                <span class="other">既见既所得</span>
                的可视化分析工具，从报表的制作、作品的发布、作品的分享克隆等一系列
                <span class="other">可视化分析标准</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- 大屏 -->
      <div class="section">
        <div class="slide">
          <div class="bigScreen1">
            <img src="../assets/imgs/bigScreen/1.gif" alt="" />
          </div>
        </div>
        <div class="slide">
          <div class="bigScreen1">
            <img src="../assets/imgs/bigScreen/2.jpg" alt="" />
          </div>
        </div>
        <div class="slide">
          <div class="bigScreen1">
            <img src="../assets/imgs/bigScreen/3.jpg" alt="" />
          </div>
        </div>
      </div>
      <!-- 智能文档 -->
      <div class="section">
        <div class="slide">
          <div class="autoDocument1">
            <div class="left">
              <img
                src="../assets/imgs/autoDocument/p1/pic1.png"
                alt=""
                class="bgimg"
              />
            </div>
            <div class="right">
              智能文档服务依托
              <span class="other">自然语言处理技术</span>
              提取文档中文本关键内容或者对文本内容进行审核
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="autoDocument2">
            <p class="title">应用场景</p>
            <img
              src="../assets/imgs/autoDocument/p2/main.png"
              alt=""
              class="main"
            />
            <div class="des1">
              <img
                src="../assets/imgs/autoDocument/p2/bg_circle.png"
                alt=""
                class="bgimg"
              />
              <p class="content">结构化信息提取</p>
            </div>
            <div class="des2">
              <img
                src="../assets/imgs/autoDocument/p2/bg_circle.png"
                alt=""
                class="bgimg"
              />
              <p class="content">文档一致性检验</p>
            </div>
            <div class="des3">
              <img
                src="../assets/imgs/autoDocument/p2/bg_circle.png"
                alt=""
                class="bgimg"
              />
              <p class="content">文书校对审查</p>
            </div>
            <div class="des4">
              <img
                src="../assets/imgs/autoDocument/p2/bg_circle.png"
                alt=""
                class="bgimg"
              />
              <p class="content">文章内容审核</p>
            </div>
            <div class="des5">
              <img
                src="../assets/imgs/autoDocument/p2/bg_circle.png"
                alt=""
                class="bgimg"
              />
              <p class="content">直播内容审核</p>
            </div>
            <div class="des6">
              <img
                src="../assets/imgs/autoDocument/p2/bg_circle.png"
                alt=""
                class="bgimg"
              />
              <p class="content">文档信息对比</p>
            </div>
            <div class="des7">
              <img
                src="../assets/imgs/autoDocument/p2/bg_circle.png"
                alt=""
                class="bgimg"
              />
              <p class="content">电商内容审核</p>
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="autoDocument3">
            <div class="content">
              <p class="title">应用架构</p>
              <img
                src="../assets/imgs/autoDocument/p3/pic3.png"
                alt=""
                class="bgimg"
              />
            </div>
          </div>
        </div>
        <!-- <div class="slide">
          <div class="autoDocument4">
            <div class="left">
              <img src="../assets/imgs/autoDocument/p4/pic4.png" alt="" />
            </div>
            <div class="right">
              <div class="description">
                <p class="title">结构化信息提取</p>
                <p class="content">
                  对文档关键内容进行结构化提取,如简历信息抽取、合同违约金额提取、地址提取等;广泛适用于多个场景
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="autoDocument5">
            <div class="left">
              <img src="../assets/imgs/autoDocument/p5/pic5.png" alt="" />
            </div>
            <div class="right">
              <div class="description">
                <p class="title">文档一致性检验</p>
                <div class="content">
                  <p>·识别World、PDF、扫描件等纸质版、线上电子版修改比对</p>
                  <p>·快速实现修改部分和本地定位,准确找出修改区域</p>
                  <p>·提高审核人员效率</p>
                </div>
              </div>
            </div>
          </div>
        </div> -->
      </div>
      <!-- RAP -->
      <div class="section">
        <div class="slide">
          <div class="rap1">
            <div class="title">
              <p class="header">RPA</p>
              <p class="des">
                人工智能机器人 · 过程自动化科技 · 企业数字化劳动力
              </p>
            </div>
            <div class="content">
              <div class="icons">
                <img src="../assets/imgs/RPA/P1/icon5.png" alt="" />
                <p>提升效率</p>
              </div>
              <div class="icons">
                <img src="../assets/imgs/RPA/P1/icon4.png" alt="" />
                <p>降低成本</p>
              </div>
              <div class="icons">
                <img src="../assets/imgs/RPA/P1/icon1.png" alt="" />
                <p>解放人力</p>
              </div>
              <div class="icons">
                <img src="../assets/imgs/RPA/P1/icon2.png" alt="" />
                <p>规避失误</p>
              </div>
              <div class="icons">
                <img src="../assets/imgs/RPA/P1/icon3.png" alt="" />
                <p>聚焦价值</p>
              </div>
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="rap2">
            <div class="left">
              <div class="title">
                <img src="../assets/imgs/RPA/P2/line.png" alt="" />
                <span>数据变现更高效</span>
              </div>
              <div class="content">
                <img src="../assets/imgs/RPA/P2/pic1.png" alt="" />
              </div>
            </div>
            <div class="right">
              <div class="title">
                <img src="../assets/imgs/RPA/P2/line.png" alt="" />
                <span>业务协同更便捷</span>
              </div>
              <div class="content">
                <img src="../assets/imgs/RPA/P2/pic2.png" alt="" />
              </div>
              <div class="des">
                <p class="top">RPA是系统间业务快速连接的最佳选择</p>
                <p class="bottom">
                  RPA的价值:多系统协同、流程编排与再造、无需现有系统改造、平衡效率与成本
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="slide">
          <div class="rap3">
            <img src="../assets/imgs/RPA/P3/pic3.png" alt="" />
          </div>
        </div>
      </div>
    </full-page>
  </div>
</template>

<script>
import '@/assets/styles/fullPage.min.css'
import $ from 'jquery'
const menuListChildren = {
  dataLake: [
    { name: '数据湖', label: 'page2', num: 2 },
    { name: '数据研发平台', label: '/Permission' },
    { name: '数据管理平台', label: '' },
    { name: '指标平台', label: '' }
  ],
  dataDisCover: [
    { name: '数据探索平台', label: '/DataExploration' },
    { name: '数据可视平台', label: 'page3' },
    { name: '快速大屏构建中心', label: 'page3' }
  ],
  IA: [
    { name: '智能文档', label: 'page5' },
    { name: '智能语音', label: '' },
    { name: '智能客服', label: '' },
    { name: '智能RPA', label: '/RPAServer' },
    { name: '智能搜索', label: '' },
    { name: '智能推荐', label: '' },
    { name: '智能风控', label: '' }
  ],
  serverCenter: [
    { name: '服务发布', label: '' },
    { name: '服务订阅', label: '' },
    { name: '服务运营', label: '' },
    { name: '服务管理', label: '' },
    { name: '服务开发', label: '' },
    { name: '服务编排', label: '' },
    { name: '服务封装', label: '' },
    { name: '服务部署', label: '' }
  ],
  safeControl: [
    { name: '数据权限', label: '' },
    { name: '系统权限', label: '' },
    { name: '密码管控', label: '' },
    { name: '数据加密', label: '' },
    { name: '数据脱敏', label: '' },
    { name: '链路监控', label: '' },
    { name: '安全预警', label: '' },
    { name: '网管策略', label: '' },
    { name: '数据传输', label: '' },
    { name: '堡垒机管理', label: '' },
    { name: '数据安检', label: '' },
    { name: '数据防护', label: '' }
  ]
}
export default {
  name: 'Home',
  data() {
    return {
      options: {
        licenseKey: 'YOUR_KEY_HEERE',
        menu: '#myNavBa',
        // navigation: true,
        anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
        sectionsColor: ['', '', ''],
        resize: true,
        recordHistory: true,
        // continuousVertical: true,
        afterLoad: this.afterLoad,
        onLeave: this.onLeave,
        afterRender: this.afterRender,
        afterSlideLoad: this.afterSlideLoad,
        onSlideLeave: this.onSlideLeave,
        controlArrows: false,
        slidesNavigation: true
      },
      menuList: [
        { name: '数据共享', label: 'page1' },
        { name: '分析探索', label: 'page2' },
        { name: 'AI应用', label: 'page3' },
        { name: '服务', label: 'page4' },
        { name: '安全管控', label: 'page5' }
      ],
      // 二级菜单
      menuChildren: [],
      currentIndex: 0,
      // 二级菜单显示隐藏
      showSecondMenu: false
    }
  },
  methods: {
    selectItem(index) {
      // console.log('index', index)
      this.showSecondMenu = true
      this.currentIndex = index
      // 复制二级菜单
      switch (index) {
        case 0:
          this.menuChildren = menuListChildren.dataLake
          break
        case 1:
          this.menuChildren = menuListChildren.dataDisCover
          break
        case 2:
          this.menuChildren = menuListChildren.IA
          break
        case 3:
          this.menuChildren = menuListChildren.serverCenter
          break
        case 4:
          this.menuChildren = menuListChildren.safeControl
          break
        default:
          break
      }
    },
    selectSure(item) {
      // this.$refs.fullpage.api.moveTo(item.label)
      this.$router.push(item.label)
    },
    leaveMean() {
      this.menuContentstyle = true
      this.menuChildren = []
      this.showSecondMenu = false
    },
    afterLoad(link, index) {
      // console.log('afterLoad', link)
      // console.log('afterLoad', index)
      // this.currentIndex = index.index
      let anchor = index.anchor
      // 暂时方案
      switch (anchor) {
        case 'page2':
          this.currentIndex = 0
          break
        case 'page3':
          this.currentIndex = 1
          break
        case 'page5':
          this.currentIndex = 2
          break
        case 'page6':
          this.currentIndex = 2
          break

        default:
          break
      }
      // 加上动画测试
      /* 首页动画 */
      if (anchor === 'page1') {
        $('.homePage .content .title').addClass(
          'animate__animated animate__fadeInTopLeft'
        )
        $('.homePage .content .lists').addClass(
          'animate__animated animate__bounceInLeft'
        )
        $('.homePage .diagram .titleName').addClass(
          'animate__animated animate__flip'
        )
        $('.homePage .diagram .bgimg').addClass(
          'animate__animated animate__fadeInRight'
        )
        $('.homePage .bubble').addClass(
          'animate__animated animate__bounceInDown'
        )
      }
      /* 数据湖动画 */
      if (anchor === 'page2') {
        $('.first .dataLakeDes .desOne').addClass(
          'animate__animated animate__fadeInTopLeft'
        )
        $('.first .dataLakeDes .desTwo').addClass(
          'animate__animated animate__fadeInUp'
        )
        $('.first .dataLakeDes .desThree').addClass(
          'animate__animated animate__fadeInTopRight'
        )
        $('.first .dataLake').addClass(
          'animate__animated animate__bounceInDown'
        )
        $('.first .dataType').addClass('animate__animated animate__flipInY')
      }
      /* 数据探索 */
      if (anchor === 'page3') {
        $('.dataDiscover1 .right').addClass(
          'animate__animated animate__fadeInRight'
        )
        $('.dataDiscover1 .left').addClass(
          'animate__animated animate__fadeInBottomLeft'
        )
      }
      /* 智能文档 */
      if (anchor === 'page5') {
        $('.autoDocument1 .right').addClass(
          'animate__animated animate__heartBeat'
        )
        $('.autoDocument1 .left').addClass(
          'animate__animated animate__fadeInTopLeft'
        )
      }
      /* RAP */
      if (anchor === 'page6') {
        $('.rap1 .title').addClass('animate__animated animate__heartBeat')
        $('.rap1 .content').addClass('animate__animated animate__rotateIn')
      }
    },
    onLeave(index) {
      // console.log('index', index) //离开页
      // console.log('nextIndex', nextIndex) 前往页
      // console.log('direction', direction) 方向
      let anchor = index.anchor
      /* 移除动画 */
      if (anchor === 'page1') {
        $('.homePage .content .title').removeClass(
          'animate__animated animate__fadeInTopLeft'
        )
        $('.homePage .content .lists').removeClass(
          'animate__animated animate__bounceInLeft'
        )
        $('.homePage .diagram .titleName').removeClass(
          'animate__animated animate__flip'
        )
        $('.homePage .diagram .bgimg').removeClass(
          'animate__animated animate__fadeInRight'
        )
        $('.homePage .bubble').removeClass(
          'animate__animated animate__bounceInDown'
        )
      }
      if (anchor === 'page2') {
        $('.first .dataLakeDes .desOne').removeClass(
          'animate__animated animate__fadeInTopLeft'
        )
        $('.first .dataLakeDes .desTwo').removeClass(
          'animate__animated animate__fadeInUp'
        )
        $('.first .dataLakeDes .desThree').removeClass(
          'animate__animated animate__fadeInTopRight'
        )
        $('.first .dataLake').removeClass(
          'animate__animated animate__bounceInDown'
        )
        $('.first .dataType').removeClass('animate__animated animate__flipInY')
      }
      /* 数据探索 */
      if (anchor === 'page3') {
        $('.dataDiscover1 .right').removeClass(
          'animate__animated animate__fadeInRight'
        )
        $('.dataDiscover1 .left').removeClass(
          'animate__animated animate__fadeInBottomLeft'
        )
      }
      if (anchor === 'page5') {
        $('.autoDocument1 .right').removeClass(
          'animate__animated animate__heartBeat'
        )
        $('.autoDocument1 .left').removeClass(
          'animate__animated animate__fadeInTopLeft'
        )
      }
      if (anchor === 'page6') {
        $('.rap1 .title').removeClass('animate__animated animate__heartBeat')
        $('.rap1 .content').removeClass('animate__animated animate__rotateIn')
      }
    },
    afterRender(data) {
      //初始化完成时页面的信息
      // console.log(data)
      let anchor = data.anchor
      if (anchor) {
        /* 首页入场动画 */
        $('.homePage .content .title').addClass(
          'animate__animated animate__fadeInTopLeft'
        )
        $('.homePage .content .lists').addClass(
          'animate__animated animate__bounceInLeft'
        )
        $('.homePage .diagram .titleName').addClass(
          'animate__animated animate__flip'
        )
        $('.homePage .diagram .bgimg').addClass(
          'animate__animated animate__fadeInRight'
        )
        $('.homePage .bubble').addClass(
          'animate__animated animate__bounceInDown'
        )
      }
    },
    // 水平滑块
    afterSlideLoad(anchorLink, index, slideIndex) {
      // console.log('afterSlideLoad', anchorLink)
      // console.log('afterSlideLoad', index) // 页面序号 从1开始
      // console.log('afterSlideLoad', slideIndex) // 到的页面序号页
      let anchor = anchorLink.anchor
      let num = slideIndex.index
      /* 数据湖 */
      if (anchor === 'page2') {
        if (num === 3) {
          $('.third .rightOne').addClass(
            'animate__animated animate__fadeInDownBig'
          )
          $('.third .rightTwo').addClass(
            'animate__animated animate__fadeInDownBig'
          )
          $('.third .rightThree').addClass(
            'animate__animated animate__fadeInDownBig'
          )
        } else if (num === 0) {
          $('.first .dataLakeDes .desOne').addClass(
            'animate__animated animate__fadeInTopLeft'
          )
          $('.first .dataLakeDes .desTwo').addClass(
            'animate__animated animate__fadeInUp'
          )
          $('.first .dataLakeDes .desThree').addClass(
            'animate__animated animate__fadeInTopRight'
          )
          $('.first .dataLake').addClass(
            'animate__animated animate__bounceInDown'
          )
          $('.first .dataType').addClass('animate__animated animate__flipInY')
        }
      }
      if (anchor === 'page3') {
        if (num === 0) {
          $('.dataDiscover1 .right').addClass(
            'animate__animated animate__fadeInRight'
          )
          $('.dataDiscover1 .left').addClass(
            'animate__animated animate__fadeInBottomLeft'
          )
        }
      }
      if (anchor === 'page5') {
        if (num === 2) {
          $('.autoDocument3 .content .title').addClass(
            'animate__animated animate__shakeY'
          )
          $('.autoDocument3 .content .bgimg').addClass(
            'animate__animated animate__fadeInRight'
          )
        } else if (num === 0) {
          $('.autoDocument1 .right').addClass(
            'animate__animated animate__heartBeat'
          )
          $('.autoDocument1 .left').addClass(
            'animate__animated animate__fadeInTopLeft'
          )
        } else if (num === 1) {
          $('.autoDocument2 .title').addClass(
            'animate__animated animate__heartBeat'
          )
          $('.autoDocument2 .main').addClass(
            'animate__animated animate__backInDown'
          )
          $('.autoDocument2 .des1').addClass(
            'animate__animated animate__fadeInLeftBig'
          )
          $('.autoDocument2 .des2').addClass(
            'animate__animated animate__fadeInLeftBig'
          )
          $('.autoDocument2 .des3').addClass(
            'animate__animated animate__fadeInLeftBig'
          )
          $('.autoDocument2 .des4').addClass(
            'animate__animated animate__fadeInRightBig'
          )
          $('.autoDocument2 .des5').addClass(
            'animate__animated animate__fadeInRightBig'
          )
          $('.autoDocument2 .des6').addClass(
            'animate__animated animate__fadeInRightBig'
          )
          $('.autoDocument2 .des7').addClass(
            'animate__animated animate__fadeInRightBig'
          )
        }
        // else if (num === 3) {
        //   $('.autoDocument4 .left').addClass(
        //     'animate__animated animate__fadeInTopLeft'
        //   )
        //   $('.autoDocument4 .right').addClass(
        //     'animate__animated animate__heartBeat'
        //   )
        // } else if (num === 4) {
        //   $('.autoDocument5 .left').addClass(
        //     'animate__animated animate__fadeInTopLeft'
        //   )
        //   $('.autoDocument5 .right').addClass(
        //     'animate__animated animate__heartBeat'
        //   )
        // }
      }
      if (anchor === 'page6') {
        if (num === 1) {
          $('.rap2 .left').addClass(
            'animate__animated animate__lightSpeedInLeft'
          )
          $('.rap2 .right').addClass(
            'animate__animated animate__lightSpeedInRight'
          )
        } else if (num === 2) {
          $('.rap3 img').addClass('animate__animated animate__flip')
        } else if (num === 0) {
          $('.rap1 .title').addClass('animate__animated animate__heartBeat')
          $('.rap1 .content').addClass('animate__animated animate__rotateIn')
        }
      }
    },
    onSlideLeave(anchorLink, index, slideIndex) {
      // console.log('onSlideLeave', anchorLink)
      // console.log('onSlideLeave', index) // 离开页面序号
      // console.log('onSlideLeave', slideIndex) // 当前的页面序号
      /* 数据湖 */
      let anchor = anchorLink.anchor
      let num = slideIndex.index
      if (anchor === 'page2') {
        if (num === 3) {
          $('.third .rightOne').removeClass(
            'animate__animated animate__fadeInDownBig'
          )
          $('.third .rightTwo').removeClass(
            'animate__animated animate__fadeInDownBig'
          )
          $('.third .rightThree').removeClass(
            'animate__animated animate__fadeInDownBig'
          )
        } else if (num === 0) {
          $('.first .dataLakeDes .desOne').removeClass(
            'animate__animated animate__fadeInTopLeft'
          )
          $('.first .dataLakeDes .desTwo').removeClass(
            'animate__animated animate__fadeInUp'
          )
          $('.first .dataLakeDes .desThree').removeClass(
            'animate__animated animate__fadeInTopRight'
          )
          $('.first .dataLake').removeClass(
            'animate__animated animate__bounceInDown'
          )
          $('.first .dataType').removeClass(
            'animate__animated animate__flipInY'
          )
        }
      }
      if (anchor === 'page3') {
        if (num === 0) {
          $('.dataDiscover1 .right').removeClass(
            'animate__animated animate__fadeInRight'
          )
          $('.dataDiscover1 .left').removeClass(
            'animate__animated animate__fadeInBottomLeft'
          )
        }
      }
      if (anchor === 'page5') {
        if (num === 2) {
          $('.autoDocument3 .content .title').removeClass(
            'animate__animated animate__shakeY'
          )
          $('.autoDocument3 .content .bgimg').removeClass(
            'animate__animated animate__fadeInRight'
          )
        } else if (num === 0) {
          $('.autoDocument1 .right').removeClass(
            'animate__animated animate__heartBeat'
          )
          $('.autoDocument1 .left').removeClass(
            'animate__animated animate__fadeInTopLeft'
          )
        } else if (num === 1) {
          $('.autoDocument2 .title').removeClass(
            'animate__animated animate__heartBeat'
          )
          $('.autoDocument2 .main').removeClass(
            'animate__animated animate__backInDown'
          )
          $('.autoDocument2 .des1').removeClass(
            'animate__animated animate__fadeInLeftBig'
          )
          $('.autoDocument2 .des2').removeClass(
            'animate__animated animate__fadeInLeftBig'
          )
          $('.autoDocument2 .des3').removeClass(
            'animate__animated animate__fadeInLeftBig'
          )
          $('.autoDocument2 .des4').removeClass(
            'animate__animated animate__fadeInRightBig'
          )
          $('.autoDocument2 .des5').removeClass(
            'animate__animated animate__fadeInRightBig'
          )
          $('.autoDocument2 .des6').removeClass(
            'animate__animated animate__fadeInRightBig'
          )
          $('.autoDocument2 .des7').removeClass(
            'animate__animated animate__fadeInRightBig'
          )
        }
        // else if (num === 3) {
        //   $('.autoDocument4 .left').removeClass(
        //     'animate__animated animate__fadeInTopLeft'
        //   )
        //   $('.autoDocument4 .right').removeClass(
        //     'animate__animated animate__heartBeat'
        //   )
        // } else if (num === 4) {
        //   $('.autoDocument5 .left').removeClass(
        //     'animate__animated animate__fadeInTopLeft'
        //   )
        //   $('.autoDocument5 .right').removeClass(
        //     'animate__animated animate__heartBeat'
        //   )
        // }
      }
      if (anchor === 'page6') {
        if (num === 1) {
          $('.rap2 .left').removeClass(
            'animate__animated animate__lightSpeedInLeft'
          )
          $('.rap2 .right').removeClass(
            'animate__animated animate__lightSpeedInRight'
          )
        } else if (num === 2) {
          $('.rap3 img').removeClass('animate__animated animate__flip')
        } else if (num === 0) {
          $('.rap1 .title').removeClass('animate__animated animate__heartBeat')
          $('.rap1 .content').removeClass('animate__animated animate__rotateIn')
        }
      }
    }
  },
  beforeDestroy() {
    // console.log('beforeDestroy')
    this.$refs.fullpage.api.destroy('all')
  }
}
</script>
<style lang="less" scoped>
.bgimg {
  width: 100%;
  height: 100%;
}
.fontstyle {
  color: black;
  font-weight: 500;
  letter-spacing: 1px;
  margin-left: 5%;
}
.other {
  font-size: 24px;
}

.activeClass {
  border-bottom: 2px red solid;
}
.home {
  text-align: center;
  /* 导航栏样式 */
  .navBarTolls {
    position: fixed;
    height: 60px;
    width: 100%;
    opacity: 0.8;
    z-index: 1000;
    background-color: #fff;
    .menuBar {
      position: fixed;
      left: 20%;
      right: 20%;
      z-index: 1000;
      // background-color: red;
      width: 60%;
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // top: 100px;
      .navBar {
        display: flex;
        flex: 1;
        height: 60px;
        line-height: 60px;
        padding-left: 10%;
        li {
          // background-color: red;
          margin-right: 4%;
          cursor: pointer;
          color: #333;
          &:hover {
            color: red;
          }
        }
      }
    }
  }
  .secondMenuBar {
    position: fixed;
    z-index: 1000;
    top: 70px;
    width: 100%;
    .menuContent {
      width: 60%;
      border-radius: 10px;
      position: fixed;
      left: 20%;
      right: 20%;
      top: 66px;
      background-color: #fff;
      opacity: 0.3;
      .secontBar {
        width: 100%;
        opacity: 0.6;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        li {
          display: block;
          width: 120px;
          // height: 50px;
          margin-right: 2%;
          margin-top: 1%;
          margin-bottom: 1%;
          // line-height: 50px;
          // background: #ccc;
          // opacity: 0;
          border-radius: 25px;
          a {
            font-size: 14px;
            color: black;
            &:hover {
              color: red;
            }
          }
        }
      }
    }
  }
  #fullpage {
    /* 首页 */
    .homePage {
      width: 100%;
      height: 100%;
      background: url('../assets/imgs/home/bg.jpg') no-repeat center center;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .content {
        width: 40%;
        position: absolute;
        left: 10%;
        .title {
          width: 70%;
          margin-bottom: 5%;
        }
        .lists {
          width: 78%;
          height: 100%;
          display: flex;
          justify-content: space-around;
          text-align: left;
          flex-wrap: wrap;
          align-items: center;
          li {
            width: 50%;
            height: 50%;
            margin-bottom: 5%;
            span {
              font-size: 16px;
            }
          }
        }
      }
      .diagram {
        position: absolute;
        right: 5%;
        bottom: 8%;
        width: 50%;
        height: 78%;
        .titleName {
          font-size: 20px;
          font-weight: 700;
          font-size: 20px;
          letter-spacing: 1px;
          margin-bottom: 2%;
        }
      }
      .bubble {
        position: absolute;
        left: 0;
        bottom: 0;
        img {
          width: 90%;
          height: 90%;
        }
      }
    }
    /* 数据湖 */
    .first {
      width: 100%;
      height: 100%;
      background: url('../assets/imgs/bg1.jpg') no-repeat center center;
      background-size: cover;
      display: flex;
      justify-content: center;
      position: relative;
      .dataLake {
        width: 60%;
        height: 54%;
        margin-top: 6%;
        position: relative;
      }
      .dataType {
        width: 7%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 43%;
        img {
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
        }
      }
      .dataLakeDes {
        //  background-color: red;
        position: absolute;
        left: 16%;
        bottom: 4%;
        width: 100%;
        height: 20%;
        p {
          font-size: 14px;
          color: #999;
          line-height: 24px;
        }
        .title {
          font-size: 18px;
          font-weight: 700;
          letter-spacing: 2px;
          color: #333;
          margin-bottom: 2%;
        }
        .desOne {
          position: absolute;
          top: 10%;
          // background-color: yellow;
          text-align: left;
          width: 21%;
        }
        .desTwo {
          position: absolute;
          top: 10%;
          left: 26%;
          // background-color: blue;
          text-align: left;
          width: 21%;
        }
        .desThree {
          position: absolute;
          top: 10%;
          left: 51%;
          text-align: left;
          width: 21%;
        }
      }
    }
    .second {
      width: 100%;
      height: 100%;
      background: url('../assets/imgs/bg2.jpg') no-repeat center center;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      .content {
        // background-color: yellow;
        width: 60%;
        height: 60%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .third {
      width: 100%;
      height: 100%;
      background: url('../assets/imgs/bg3.jpg') no-repeat center center;
      background-size: cover;
      position: relative;
      .leftContet {
        width: 50%;
        height: 80%;
        padding: 1%;
        background-color: #fff;
        border-radius: 5%;
        position: absolute;
        top: 10%;
        left: 5%;
        img {
          width: 100%;
          height: 100%;
          border-radius: 4%;
        }
      }
      .title {
        font-size: 18px;
        font-weight: 700;
        color: #333;
      }
      p {
        font-size: 14px;
        color: #999;
        line-height: 24px;
      }
      .rightOne {
        // background-color: rosybrown;
        text-align: left;
        width: 18%;
        position: absolute;
        right: 18%;
        top: 14%;
      }
      .rightTwo {
        text-align: left;
        width: 18%;
        position: absolute;
        right: 6%;
        top: 42%;
      }
      .rightThree {
        text-align: left;
        width: 18%;
        position: absolute;
        right: 18%;
        bottom: 14%;
      }
    }
    /* 数据探索 */
    .dataDiscover1 {
      background: url('../assets/imgs/dataDiscover/bg1.jpg') no-repeat center
        center;
      background-size: cover;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      letter-spacing: 1px;
      color: black;
      font-weight: 700;
      font-size: 18px;
      .left {
        background-color: #fff;
        position: absolute;
        width: 40%;
        height: 60%;
        left: 10%;
        padding: 0.8%;
      }
      .right {
        // background-color: red;
        width: 30%;
        position: absolute;
        left: 60%;
        text-align: left;
      }
    }
    .dataDiscover2 {
      background: url('../assets/imgs/dataDiscover/bg2.jpg') no-repeat center
        center;
      background-size: cover;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      letter-spacing: 1px;
      color: black;
      font-weight: 700;
      font-size: 18px;
      .left {
        position: absolute;
        left: 10%;
        width: 50%;
        height: 50%;
      }
      .right {
        position: absolute;
        left: 65%;
        width: 30%;
        text-align: left;
      }
    }
    .dataDiscover3 {
      background: url('../assets/imgs/dataDiscover/bg3.jpg') no-repeat center
        center;
      background-size: cover;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      letter-spacing: 1px;
      color: black;
      font-weight: 700;
      font-size: 18px;
      .left {
        position: absolute;
        left: 10%;
        width: 50%;
        height: 50%;
      }
      .right {
        position: absolute;
        left: 65%;
        width: 30%;
        text-align: left;
      }
    }
    /* 大屏 */
    .bigScreen1 {
      width: 100%;
      height: 100%;
      background: url('../assets/imgs/bg2.jpg') no-repeat center center;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 68%;
        height: 68%;
      }
    }
    /* 智能文档 */
    .autoDocument1 {
      width: 100%;
      height: 100%;
      background: url('../assets/imgs/autoDocument/p1/bg1.jpg') no-repeat center
        center;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      .left {
        width: 50%;
      }
      .right {
        width: 40%;
        text-align: left;
        letter-spacing: 1px;
        line-height: 40px;
        font-size: 18px;
        font-weight: 700;
      }
    }
    .autoDocument2 {
      width: 100%;
      height: 100%;
      background: url('../assets/imgs/autoDocument/p2/bg2.jpg') no-repeat center
        center;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .title {
        font-size: 20px;
        font-weight: bold;
        position: absolute;
        letter-spacing: 1px;
        left: 16%;
        top: 12%;
      }
      .main {
        top: 16%;
        width: 40%;
        position: absolute;
      }
      .des1 {
        width: 10%;
        position: absolute;
        bottom: 24%;
        left: 28%;
        .content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 16px;
          line-height: 24px;
          font-weight: bold;
        }
      }
      .des2 {
        width: 10%;
        position: absolute;
        bottom: 12%;
        left: 19%;
        .content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 16px;
          line-height: 24px;
          font-weight: bold;
        }
      }
      .des3 {
        width: 10%;
        position: absolute;
        bottom: 3%;
        left: 29%;
        .content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 16px;
          line-height: 24px;
          font-weight: bold;
        }
      }
      .des4 {
        width: 10%;
        position: absolute;
        bottom: 8%;
        right: 35%;
        .content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 16px;
          line-height: 24px;
          font-weight: bold;
        }
      }
      .des5 {
        width: 10%;
        position: absolute;
        bottom: 24%;
        right: 28%;
        .content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 16px;
          line-height: 24px;
          font-weight: bold;
        }
      }
      .des6 {
        width: 10%;
        position: absolute;
        bottom: 6%;
        right: 24%;
        .content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 16px;
          line-height: 24px;
          font-weight: bold;
        }
      }
      .des7 {
        width: 10%;
        position: absolute;
        bottom: 22%;
        right: 17%;
        .content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 16px;
          line-height: 24px;
          font-weight: bold;
        }
      }
    }
    .autoDocument3 {
      width: 100%;
      height: 100%;
      background: url('../assets/imgs/autoDocument/p3/智能文档.jpg') no-repeat
        center center;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      .content {
        height: 80%;
        text-align: left;
        .title {
          font-size: 20px;
          font-weight: 700;
          letter-spacing: 1px;
          margin-bottom: 2%;
        }
      }
    }
    .autoDocument4 {
      width: 100%;
      height: 100%;
      background: url('../assets/imgs/autoDocument/p4/bg.jpg') no-repeat center
        center;
      background-size: cover;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .left {
        width: 45%;
        // height: 80%;
        img {
          width: 100%;
        }
      }
      .right {
        width: 30%;
        text-align: left;
        .description {
          .title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 20px;
          }
          .content {
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            line-height: 24px;
          }
        }
      }
    }
    .autoDocument5 {
      width: 100%;
      height: 100%;
      background: url('../assets/imgs/autoDocument/p5/bg5.jpg') no-repeat center
        center;
      background-size: cover;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .left {
        width: 45%;
        img {
          width: 100%;
        }
      }
      .right {
        width: 30%;
        text-align: left;
        .description {
          .title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 20px;
          }
          .content {
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            line-height: 24px;
          }
        }
      }
    }
    /* RAP */
    .rap1 {
      width: 100%;
      height: 100%;
      background: url('../assets/imgs/RPA/P1/bg1.jpg') no-repeat center center;
      background-size: cover;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      position: relative;
      .title {
        width: 60%;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 1px;
        text-align: left;
        position: absolute;
        top: 20%;
        .header {
          font-size: 24px !important;
          margin-bottom: 20px;
        }
      }
      .content {
        width: 70%;
        // margin-top: 4%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        // padding: 0 0 40% 0;
        .icons {
          text-align: center;
          img {
            width: 70%;
            height: 70%;
          }
          p {
            font-size: 16px;
            font-weight: bold;
            letter-spacing: 1px;
          }
        }
      }
    }
    .rap2 {
      width: 100%;
      height: 100%;
      background: url('../assets/imgs/RPA/P2/bg2.jpg') no-repeat center center;
      background-size: cover;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .left {
        height: 100%;
        padding: 6% 0 0 0;
        .title {
          // width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span {
            font-size: 20px;
            font-weight: bold;
            margin-left: 1%;
          }
        }
        .content {
          margin-top: 4%;
        }
      }
      .right {
        height: 100%;
        padding: 6% 0 0 0;
        .title {
          // width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span {
            font-size: 20px;
            font-weight: bold;
            margin-left: 1%;
          }
        }
        .content {
          margin-top: 2%;
        }
        .des {
          margin-top: 4%;
          text-align: left;
          letter-spacing: 1px;
          .top {
            font-size: 16px;
            font-weight: 500;
            color: black;
          }
          .bottom {
            font-size: 12px;
            margin-top: 1%;
          }
        }
      }
    }
    .rap3 {
      width: 100%;
      height: 100%;
      background: url('../assets/imgs/RPA/P3/bg3.jpg') no-repeat center center;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        // width: 60%;
        height: 78%;
      }
    }
  }
}
</style>
